<template>
    <div class="web_chat" id="accessDrag">
      <div class="base_tiao">
        <img src="../../../assets/img/jiantou@2x.png" alt="">
        <span class="dot" v-show="unCanCount"></span>
      </div>
      <div class="wrap_cont">
        <div class="con">
          <p class="line" @click="openChat">{{$t('public.webchat')}}<span class="wrap_count" v-show="unCanCount">{{unCanCount ? unCanCount : ''}}</span></p>
          <a href="//help.7moor.com/" target="_blank">{{$t('public.helpCenter')}}</a>
        </div>
        <img class="backg" src="../../../assets/img/zixunicon.png" alt="">
      </div>
      <div v-if="tipShow" class="tooltip tooltip-div"><span @click.stop="hideTipShow" class="iconfont icon-guanbi2"></span>{{$t('public.accessWebchat')}}</div>
      <i v-if="tipShow" class="tooltip tooltip-i"></i>
    </div>
</template>
<script>
  export default {
    data () {
      return {
        unCanCount: '', // 未读消息数
        tipShow: false
      }
    },
    methods: {
      // 点击在线咨询 传入参数 可参考官网对接
      openChat () {
        let {account, companyName, name} = this.$store.state.session.account
        let {exten, mobile} = this.$store.state.session.user
        window.qimoClientId = {
          customField: { // 扩展字段，json对象，对象中的key-value都自定义
              '账户编号': account,
              '账户名': name,
              '公司名称': companyName,
              '工号': exten,
              '联系电话': mobile || '',
              "user_labels": {
                "account": account,
                "name": name,
                "companyName": companyName,
                "exten": exten,
                "mobile": mobile || ''
              }
          }
        }
        qimoChatClick()
        this.unCanCount = ''
      },
      hideTipShow () {
        this.tipShow = false
        window.localStorage.setItem('consultPopoverFlag', 'true')
      }
    },
    beforeMount () {
      let that = this
      window.addEventListener('message',function(event) {
        // 监听事件判断
        let isString = typeof event.data === 'string'
        if (typeof event.data === 'string' && event.data.indexOf('ykfUnReadMsgCount_') > -1) {
            try {
                let data = event.data
                let [ev, count] = data.split('_')
                that.unCanCount = count
            }catch (e) {
                console.log(e)
            }
        }
      }, false)
      const consultPopoverFlag = window.localStorage.getItem('consultPopoverFlag')
      this.tipShow = consultPopoverFlag ? false : true
    },
    mounted () {
      let drag = document.getElementById('accessDrag')
      // 初始top值
      let clientHeight = document.body.clientHeight
      let iniTop = 0
      iniTop = clientHeight - 80
      drag.style.top = iniTop + 'px'
      let self = this
      drag.onmousedown = function (ev) {
        let clientY = ev.clientY
        let domY = drag.offsetTop
        let disY = clientY - domY
        let clientHeight = document.body.clientHeight
        drag.classList.add('moveD')
        document.onmousemove = function (event) {
          event.preventDefault();
          let moveY = event.clientY - disY
          // 边界设置
          if (moveY < 52) {
            moveY = 52
          }
          if (moveY > clientHeight - 72) {
            moveY = clientHeight - 72
          }
          drag.style.top = moveY + 'px'
          event.stopPropagation()
        }
        document.onmouseup = function (e) {
          document.onmousemove = null
          drag.classList.remove('moveD')
          e.stopPropagation()
        }
        ev.stopPropagation()
      }
    },
  }
</script>
<style lang="stylus" scoped>
@import "../../../assets/common.styl"
.web_chat
  position absolute
  right 0
  top 90%
  transition all 0.3s
  padding 4px 0
  z-index 2001
  .base_tiao
    width 10px
    height 60px
    text-align center
    background:linear-gradient(180deg,rgba(112,204,255,1) 0%,rgba(0,132,255,1) 100%)
    border-radius:4px 0px 0px 4px
    line-height 68px
    position relative
    .dot
      display inline-block
      width 10px
      height 10px
      border-radius 50%
      background $c-pink
      position absolute
      top -3px
      left -3px
    img
      width 5px
      height 16px
    // background url(../../../assets/img/jiantou@2x.png) no-repeat center center
    // background-size 3px 16px
  .wrap_cont
    position relative
    display none
    padding 4px 32px 4px 0
    .backg
      position absolute
      top 0
      width 68px
      height 68px
      right 3px

    .con
      box-sizing border-box
      padding 8px 52px 8px 32px
      height 60px
      background rgba(255,255,255,1)
      box-shadow 0px 0px 10px 0px rgba(0,0,0,0.1)
      border-radius 100px 0px 0px 100px
      p,
      a
        font-size 12px
        color rgba(102,102,102,1)
        line-height 18px
      p:hover,
      a:hover
        color #459AE9
        cursor pointer
      .line
        margin-bottom 8px
        span
          display inline-block
          padding 0px 5px
          border-radius 8px
          font-size 12px
          background #F5222D
          color #fff
          line-height 16px
          margin-left 4px
.web_chat.moveD,
.web_chat:hover
  .base_tiao
    display none
  .wrap_cont
    display flex
  .tooltip-div
    right 176px
    top 20px
  .tooltip-i
    right 164px
    top 33px
.tooltip-i
  position absolute
  margin 0 0 0 4px
  width 2px
  height 1px
  border-width 5px
  border-style solid
  opacity 0.8
  border-color transparent transparent transparent rgb(28, 141, 224)
  border-image initial
  right 10px
  z-index 2000
  top 29px
.tooltip-div
  position absolute
  z-index 50000
  opacity 0.8
  background-color rgb(28, 141, 224)
  padding 9px 10px
  color $cf-white
  border-radius 4px
  white-space nowrap
  right 22px
  top 16px
.tooltip
  visibility visible
.icon-guanbi2
  font-weight bold
  vertical-align middle
  cursor pointer
</style>
